// article index page
@mixin article_contentshadow {
  -moz-box-shadow:0px 0px 0px white;
  -webkit-box-shadow:0px 0px 0px white;
  -ms-box-shadow:0px 0px 0px white;
  -o-box-shadow:0px 0px 0px white;
}
@mixin article_show_item{
  box-shadow:4px 4px 4px #8f9294,-4px -4px 4px #8f9294;
  -webkit-box-shadow:4px 4px 4px #8f9294,-4px -4px 4px #8f9294;
  -ms-box-shadow:4px 4px 4px #8f9294,-4px -4px 4px #8f9294;
  -moz-box-shadow:4px 4px 4px #8f9294,-4px -4px 4px #8f9294;
  -o-box-shadow:4px 4px 4px #8f9294,-4px -4px 4px #8f9294;
}
@mixin article_contentscale{
  transform:scale(1.03);
  -webkit-transform:scale(1.03);
  -ms-transform:scale(1.03);
  -moz-transform:scale(1.03);
  -o-transform:scale(1.03);
}
@mixin article_contenttransition {
  -webkit-transition:0.8s;
  -ms-transition:0.8s;
  -o-transition:0.8s;
  -moz-transition:0.8s;
}

@mixin article_contentshadow_hover {
  box-shadow: 15px 15px 10px 1px #908686,-15px -5px 40px -10px #908686;
  -webkit-box-shadow: 15px 15px 40px -10px #908686,-15px -5px 40px -10px #908686;
  -ms-box-shadow: 15px 15px 10px 1px #908686,-15px -5px 40px -10px #908686;
  -moz-box-shadow: 15px 15px 10px 1px #908686,-15px -5px 40px -10px #908686;
}

@mixin welcome_head_finger {
  transform: scale(1.3);
  -webkit-transform:scale(1.3);
  -o-transform:scale(1.3);
  -ms-transform:scale(1.3);
  -moz-transform:scale(1.3);
}
@mixin welcome_head_finger_start{
  transform: scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
  -moz-transform:scale(1);
}
.list-group-item {
  //second color
  margin: 0px 15px;
  padding: 20px 15px 50px;  
  @include article_contentshadow;
  @include article_contenttransition;
  &:hover {
    @include article_contentshadow_hover;
  }
}
.artilce_transform{
  &:hover{
    @include article_contentscale;
  }
}

// modified love and unlove height
.pull-right {
  margin-top: -1px;
}
.pull-right_create{
  float:right;
  @media screen and(max-width:435px){
    float:left;
  }
  @media screen and(max-width:400px){
  float:left;
  }
}
.list-group-item:first-child{
  @media screen and(max-width:435px){
    margin-right: -25px;
    margin-left: -24px;
  }
}
.label-info{
  margin-top: 0px;
  margin-bottom: 12px;
  @media screen and(max-width: 435px){
    float:right;
    margin-top:0;
  }
  @media screen and(max-width:414px){
    margin-top:0;
  }
  @media screen and(max-width: 411px){
    float:right;
    margin-top: 0px;
  }
  @media screen and(max-width:375px){
    float:left;
    margin-top:10px;
  }
  @media screen and(max-width:360px){
  margin-top:10px;
  }
  @media screen and(max-width: 320px){
    float:left;
    margin-top:10px;
  }
}
.navbar-brand{
  float: none;
  position: absolute;
  left:45%;
  @media screen and (max-width:435px){
    position:absolute;
    left:38%;
  }
  @media screen and (max-width:414px){
    position:absolute;
    left:37%;
  }
  @media screen and (max-width:360px){
    position:absolute;
    left:27%;
  }
  @media screen and (max-width:320px){
    position:absolute;
    left:32%;
  }
}

.jumbotron {
    position: relative;
    background: #000 url("/images/jumbotron-bg.png") center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}
.article_show_item{
  margin-top:4px;
  text-indent:2em;
  padding:15px 20px;
  @include article_show_item;
  border:{
    width:2px;
    radius:5px;
    style:solid;
    color:#f5f2f2;
  }
}
.article-show_footline{
  width: 60%;
  text-align: center;
  border-width: 2px;
  border-top-color: rgba(113, 104, 104, 0.98);
}

//welcome scrolltop
.scrolltop {
  width: 3vw;
  height: 3vw;
  display: block;
  background: #888;
  color:#fff;
  text-decoration: none;
  line-height: 3vw;
  text-align: center;
  font-size: 2vw;
  position: fixed;
  right: 50px;
  bottom: 50px;
  display:none;
  &:hover {
    color: black;
    background-color: #f8f5f5;
  }
}